<template>
  <div >
    <a-row :gutter="[8, 12]">
    <template v-for="(item, index) in cardData" :key="item.title">
      <a-col :span="24 / 4">
      <Card size="small" hoverable :loading="loading" :title="item.title"  @click="cardClick(index,item.state)">
        <template #extra>
<!--          <Tag :color="item.color">{{ item.action }}</Tag>-->
        </template>
        <div class="flex items-center justify-between px-4 py-4">
          <CountTo :prefix="item.prefix" :startVal="1" :endVal="item.value" class="text-2xl" />
<!--          <svg-icon :icon="item.icon" :size="40" />-->
          <img  :src="'home/'+item.icon" :width="50" :height="50"/>
        </div>
<!--        <div class="flex justify-between p-2 px-4">
          <span>总{{ item.title }}</span>
          <count-to :prefix="item.prefix" :startVal="1" :endVal="item.total" />
        </div>-->
      </Card>
      </a-col>
    </template>
    </a-row>
  </div>
</template>
<script lang="ts" setup>
import {ref, onMounted, inject, watch, computed, unref} from 'vue';
import { CountTo } from '@components/common';
import { SvgIcon } from '@components/common';
import { Tag, Card } from 'ant-design-vue';
import { growCardList } from '../data';
import { growCard } from '@pkg/apis/sys';
import { useGo } from '@/hooks/web/usePage'
import XEUtils from "xe-utils";
const go = useGo();
let dateType = inject<any>('dateType');
let dateTypeValue = inject<any>('dateTypeValue');
let airportId = inject<any>('airportId');
let cardData: any = ref([]);
defineProps({
  loading: { type: Boolean },
});

function initData(params) {
  growCard(params).then((result) => {
    if (result) {
      cardData.value = result;
    } else {
      cardData.value = growCardList;
    }
  });
}

function cardClick(index,state){
  localStorage.setItem("orderState", state)
  let opt={
    path: '/order',
  }

  if(index==0){
    opt.path="/business/appUser"
  }
  go(opt);
}

watch(dateType, (nweProps, oldProps) => {
  initData({
    dateRuleCode: dateType.value,
  });
});

watch(dateTypeValue, (nweProps, oldProps) => {
  initData({
    dateRuleCode: dateType.value,
    year: dateTypeValue.value,
  });
});

watch(airportId, (nweProps, oldProps) => {
  initData({
    dateRuleCode: dateType.value,
    year: dateTypeValue.value,
    airportId: airportId.value,
  });
});
onMounted(() => {
  initData({
    dateRuleCode: dateType.value,
  });
});
</script>
